<template>
  <div class="list">
    <van-nav-bar
      title="商品评论"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <div class="pinglun">
      <h2>提交评论</h2>
      <hr />
      <div class="pinglun-a">
        <input
          type="text"
          placeholder="请输入评论内容"
          class="inputs"
          v-model.trim="message"
        /><br />
        <button class="fabiao" @click="btnFn">发表</button>
      </div>
      <hr />
      <h2>
        评论列表 <span class="tiao">{{ total }}条评论</span>
      </h2>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <hr />

        <div class="liebiao" v-for="(item, index) in pinglun" :key="index">
          <p class="oo">{{ item.content }}</p>

          <div class="lpp">
            <span class="pp"
              >{{ item.user_name }}
              <i class="li">{{ item.add_time | filters }}</i>
            </span>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { postcommentData, getcommentsData } from "../../apis/api";
export default {
  data() {
    return {
      pinglun: [],
      pageindex: 1,
      message: "",
      loading: false,
      finished: false,
      total: 0, // 评论总数
    };
  },
  async created() {
    this.getpinglun();
  },
  methods: {
    async getpinglun() {
      // //提交评论信息
      // const res = await postcommentData(
      //   this.$route.params.id,
      //   `content=${this.message}`
      // );
      // console.log(res);
      //获取评论信息
      console.log(this.pageindex);
      const res = await getcommentsData(this.$route.params.id, this.pageindex);
      console.log(res);
      if (res.message.length === 0) this.finished = true;
      this.pinglun.push(...res.message);
      // 如果没有数据，则完成加载
      //加到总评论哪里
      this.total = res.total;
      // 加载完成后，关闭加载状态
      this.loading = false;
    },
    async btnFn() {
      // console.log(1);
      if (this.message === "") return this.$toast.fail("评论不能为空");
      const res = await postcommentData(
        this.$route.params.id,
        `content=${this.message}`
      );
      console.log(1);
      if (res.message === "评论提交成功") {
        this.pageindex = 1;
        this.message = "";
        //重新获取数据
        this.getpinglun();
        this.$toast.success("评论提交成功");
      } else {
        this.$toast.fail("评论评论提交失败");
      }

      // console.log(res);
    },
    // 加载更多
    onLoad() {
      // 页码+1
      this.pageindex++;
      // 获取新的评论列表
      this.getpinglun();
    },
  },
};
</script>

<style lang="less" scoped>
div.list {
  padding: 0 10px;
  van-nav-bar {
    template {
    }
  }

  div.pinglun {
    h2 {
      display: flex;
    }

    hr {
    }

    div.pinglun-a {
      input.inputs {
        width: 340px;
        height: 130px;
      }

      br {
      }

      button.fabiao {
        width: 350px;
        height: 30px;
        color: #fff;
        margin-top: 10px;
        background-color: aqua;
        border-radius: 5px;
        border: none;
      }
    }
    .tiao {
      font-size: 15px;
      margin-left: 180px;
      color: rgb(192, 189, 189);
      margin-top: 10px;
    }
    .liebiao {
      border: 1px solid #f3f3f3;
      // display: flex;
      .oo {
        display: flex;
        margin-left: 15px;
      }
      .lpp {
        display: flex;
        .pp {
          display: flex;
          color: aqua;
          margin-left: 15px;
        }
        .li {
          display: flex;
          color: #cac6c6;
          margin-left: 140px;
          font-size: 13px;
        }
      }
    }
    .jiazai {
      border: 1px solid red;
      background-color: #fff;
      width: 350px;
      height: 30px;
      color: red;
    }
  }
}
</style>
